<template>
  <div class="list">
    <ul class="list-nav">

      <li><router-link to="/list/part3" active-class="active">起始页</router-link></li>

      <!-- 相关文章链接：https://blog.csdn.net/owo_ovo/article/details/136168183?fromshare=blogdetail&sharetype=blogdetail&sharerId=136168183&sharerefer=PC&sharesource=m0_74802991&sharefrom=from_link -->

      <!-- 一、声明式导航 -->
      <!-- query传参 -->

      <!-- 路径字符串拼接(不推荐) -->
      <!-- <li v-for="(item) in list":key="item.id"><router-link :to="`/list/part1?id=${item.id}&name=${item.name}&hobby=${item.hobby}`" active-class="active">{{ item.name }}</router-link></li> -->

      <!-- to传对象写法(推荐) -->
      <!-- <li v-for="(item) in list":key="item.id"><router-link :to="{
        path:'/list/part1',
        query:{
          id:item.id,
          name:item.name,
          hobby:item.hobby
        }
      }" active-class="active">{{ item.name }}</router-link></li> -->


      <!-- params传参 -->

      <!-- 路径字符串拼接(不推荐) -->
      <!-- <li v-for="(item) in list":key="item.id"><router-link :to="`/list/part2/${item.id}/${item.name}/${item.hobby}`" active-class="active">{{ item.name }}</router-link></li> -->

      <!-- to传对象写法(推荐) -->
      <li v-for="(item) in list" :key="item.id"><router-link :to="{
        name: 'pp2',
        // part:'/list/part2'
        params: {
          id: item.id,
          name: item.name,
          hobby: item.hobby
        }
      }" active-class="active">{{ item.name }}</router-link></li>



      <!-- 二、编程式导航（推荐使用） -->
      <!-- 不同于声明式导航，编程式导航是函数形式，相比于声明式导航的标签，更加灵活。 -->
      <!-- query传参 -->
       <!-- <button></button> -->

      <!-- params传参 -->
       <!-- <button></button> -->
        
    </ul>
    <div class="show">
      <router-view></router-view>
    </div>

  </div>
</template>

<script setup lang='ts' name="List">
import { type PersonTypes } from '@/types/inedx';
import { ref, reactive } from 'vue'





let list: PersonTypes = reactive([
  {
    id: 1,
    name: "小红",
    hobby: "画画"
  },
  {
    id: 2,
    name: "小绿",
    hobby: "跳舞"
  },
  {
    id: 3,
    name: "小黄",
    hobby: "唱歌"
  },
  {
    id: 4,
    name: "小黑",
    hobby: "游泳"
  },
])


</script>


<style lang='scss' scoped>
.list {
  height: 100%;
  display: flex;

  ul {
    margin: 0;
    padding: 0;
  }

  ul li {
    list-style: none;
  }

  a {
    text-decoration: none;
    color: rgb(58, 13, 13);
  }

  .list-nav {
    width: 25%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
    border: 1px solid black;
  }

  .list-nav li {
    border: 1px solid black;
  }

  .show {
    width: 75%;
    border: 1px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .active {
    color: red;
  }
}
</style>